<template>
  <!-- 头部整体盒子 -->
  <div id="header" class="container-fuild" style="width:100%">
    <!-- 电脑导航 -->
      <div class=" content-container">

        <!-- 导航内容 -->
        <ul class="header-nav-wrapper">
          <li>
            <!-- 导航logo -->
            <div class="header-nav-logo">
              <img src="@/assets/img/logo-AVERTEX.svg"  />
            </div>
          </li>
          <li
            v-for="(item, index) in navList"
            :key="index"
            :class="index == navIndex ? 'active' : ''"
          >
            <router-link :to="item.path" @click="navClick(index, item.name, item.path)">
              {{ item.name }}
            </router-link>
          </li>
          <li>
            <el-button plain @click="logout()" v-if="userInfo">
              {{userInfo.username}}: Press to  Logout
            </el-button>
            <el-button plain @click="dialogFormVisible = true" v-else>
              Login / Register
            </el-button>
          </li>
        </ul>



        <el-dialog v-model="dialogFormVisible" title="Login / Register" :width="dialogWidth" class="dialog">
          <img src="/public/logo-AVERTEX.svg"  class="header-img"/>

          <el-form :model="form">
            <el-form-item :label-width="formLabelWidth">
              <el-input v-model="form.email" autocomplete="off" placeholder="Enter your email" />
            </el-form-item>
            <el-form-item  :label-width="formLabelWidth">
              <el-input v-model="form.password" autocomplete="off"  type="password" placeholder="Enter your password"/>
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="dialogFormVisible = false;register()" text>
                have no account?
              </el-button>
              <el-button type="primary" @click="login()" >
                Login
              </el-button>

            </div>
          </template>
        </el-dialog>
<!--          <div class="search-input">-->
<!--            &lt;!&ndash; 使用内置后缀图标 &ndash;&gt;-->
<!--            <el-input-->
<!--              v-model="input"-->
<!--              style="width: 300px"-->
<!--              placeholder="Please enter information"-->
<!--            >-->
<!--              <template #suffix>-->
<!--                ｜&nbsp;-->
<!--                <el-icon class="el-input__icon"><search /></el-icon>-->
<!--                &nbsp;-->
<!--                search-->
<!--                <div class="mb-4">-->
<!--                  <el-button-->
<!--                    v-for="button in buttons"-->
<!--                    :key="button.text"Ï-->
<!--                    :type="button.type"-->
<!--                    text-->
<!--                    bg-->
<!--                  >-->
<!--                    {{ button.text }}-->
<!--                  </el-button>-->
<!--                </div>-->
<!--              </template>-->
<!--            </el-input>-->
<!--&lt;!&ndash;            <input type="text" class="input-box">&ndash;&gt;-->
<!--          </div>-->

      </div>

  </div>
</template>

<script  setup>
import { ref, reactive,onMounted } from 'vue'
import 'element-plus/dist/index.css'
import { useRouter } from 'vue-router'
import axios from 'axios'
import ReportApiUrlConfig from '../api/select.ts'
import { ElMessage } from 'element-plus'
const navIndex = ref('')
navIndex.value = sessionStorage.getItem('navIndex')
  ? sessionStorage.getItem('navIndex')
  : 0
const menuName = ref('HOME')
const menuClass = ref('glyphicon glyphicon-menu-down')
const input = ref('');
const navList = [
  {
    name: 'HOME',
    path: '/home',
    children: []
  },
  {
    name: 'PRODUCTS',
    path: '/software',
    children: []
  },
  {
    name: 'ABOUT US',
    path: '/newsinformation',
    children: []
  },
  {
    name: 'CONTACT US',
    path: '/companyintroduction',
    children: []
  },

]
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const router=useRouter()
const register =() =>{
  // 跳转到 detail 页面
  router.push('/Register')
    .then(() => {
      // 确保页面滚动到顶部
      window.scrollTo(0, 0); // 滚动到页面顶部
    });
}

const login =  async () =>{
  try {
    const { data } = await axios.post(ReportApiUrlConfig.login,form);
    if (!data.data && data.code!=200)  {
      ElMessage.error(data.msg);
      return
    }
    ElMessage({
      message: data.userInfo.username+': login successfully',
      type: 'success',
      duration: 10000
    })
    if (data.data) {
      // 保存 token
      localStorage.setItem('token', data.data.token);
      // 将 userInfo 对象转为 JSON 字符串并存储到 localStorage 中
      localStorage.setItem('userInfo', JSON.stringify(data.data.userInfo));
      const user = JSON.stringify(data.data.userInfo);
      userInfo.value = data.data.userInfo;
      console.log(user)
    }
    dialogFormVisible.value = false
    router.push('/')
      .then(() => {
        // 确保页面滚动到顶部
        window.scrollTo(0, 0); // 滚动到页面顶部
      });
  } catch (error) {
    ElMessage.error('Oops, this is a error message.')
    console.error("Error fetching product list:", error);
  }

}

const logout=()=>{
  localStorage.removeItem('token');
  localStorage.removeItem('userInfo');
  userInfo.value = null;
  ElMessage({
    message: ' logout successfully',
    type: 'success',
  })
  router.push('/')
    .then(() => {
      // 确保页面滚动到顶部
      window.scrollTo(0, 0); // 滚动到页面顶部
      // 刷新页面
      window.location.reload();  // 刷新页面
    });
}
const token=ref();
const userInfo=ref(null);
const getUserinfo = async () => {
  token.value = localStorage.getItem('token');
  // 从 localStorage 获取 'userInfo' 字符串
  const userInfoString = localStorage.getItem('userInfo');
// 如果获取到值并且值存在，则解析为 JavaScript 对象
   userInfo.value = userInfoString ? JSON.parse(userInfoString) : null;
};
getUserinfo() ;
const formLabelWidth = '140px'

const form = reactive({
  email: '',
  password: ''
})
function navClick(index, name, path) {
  navIndex.value = index;
  sessionStorage.setItem('navIndex', index);
  menuName.value = name;

  // 修改 URL 哈希值，但不刷新页面
  window.location.hash = path;
}
function menuClick() {
  if (menuClass.value == 'glyphicon glyphicon-menu-down') {
    menuClass.value = 'glyphicon glyphicon-menu-up'
  } else {
    menuClass.value = 'glyphicon glyphicon-menu-down'
  }
}

const dialogWidth = ref('500px');

onMounted(() => {
  const updateDialogWidth = () => {
    dialogWidth.value = window.innerWidth <= 768 ? '90%' : '500px';
  };

  updateDialogWidth();
  window.addEventListener('resize', updateDialogWidth);
});
</script>

<style scoped>
.container-fuild{

  width: 100%;
  height: 81px;
  background: #FFFFFF;
  //box-shadow: 3px 0px 16px 0px #000000;
  display: flex;
  justify-content: center;

  .content-container{
    display: flex;
    flex-direction: row; /* 子元素水平排列 */
    justify-content: center; /* 子元素水平居中 */
    align-items: center; /* 子元素垂直方向居中 */


    .header-nav-logo{
      padding-top: 12px;
      width: 63px;
      height: 63px;

      img{
        width: 63px;
        height: 63px;
      }
    }

    .search-input{
      width: 365px;
      height: 38px;
      display: flex;
      justify-content: center;

      position: relative;
      display: inline-block;

      .input-box{
        height: 38px;
        width: 100%;
        padding-right: 40px; /* 给右侧留出空间，避免文字被图标覆盖 */
        box-sizing: border-box; /* 确保 padding 不影响宽度 */
        z-index: 1;
      }
      .search-icon{
        position: absolute;
        top: 50%;
        right: 10px; /* 图标距右边框的距离 */
        transform: translateY(-50%);
        pointer-events: none; /* 避免图标阻挡输入框点击 */
        color: #ccc;
        z-index: 2;
      }

    }
    .header-nav-wrapper {
      line-height: 100%;
      display: flex; /* 使用 Flexbox 布局 */
      justify-content: center; /* 根据需要调整间距，比如 space-between、space-around 等 */
      align-items: center; /* 垂直方向对齐 */
      list-style: none; /* 去除默认的列表样式 */
      padding: 0; /* 去除内边距 */
      margin: 0; /* 去除外边距 */
    }

    .header-nav-wrapper li {
      display: inline-block; /* 每个 li 水平排列 */
      padding: 10px 20px; /* 添加间距，根据需要调整 */
      position: relative; /* 为子元素绝对定位提供上下文 */
      font-size: 20px;
    }

    .header-nav-wrapper li .underline {
      display: block; /* 显示下划线 */
      height: 2px; /* 下划线的高度 */
      background: transparent; /* 默认隐藏 */
      transition: background 0.3s ease; /* 平滑过渡效果 */
    }

    .header-nav-wrapper li:hover .underline {
      background: #000; /* 鼠标悬停时显示下划线 */
    }

    .header-nav-wrapper li.active {
      font-weight: bold; /* 当前选中项加粗 */
    }
  }
}
.dialog{
  position: relative;
}
.header-img{
  width: 89px;
  height: 83px;
  position: absolute;
  top: 71px;
  left: 40px;
}

.container-fuild {
  width: 100%;
  height: 81px;
  background: #FFFFFF;
  box-shadow: 3px 0px 16px 0px #000000;
  display: flex;
  justify-content: center;
  position: sticky; /* 使其吸顶 */
  top: 0; /* 吸顶 */
  z-index: 100; /* 确保 Header 在最上面，防止被其他内容遮挡 */
  transform-origin: top left; /* 确保缩放从左上角开始 */
}

/* 对小屏设备进行缩放 */
@media screen and (max-width: 768px) {
  .header-nav-wrapper {
    transform: scale(0.6);
    width: 60%;
    height: 100%;
    line-height: 100%;
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 居中对齐 */
    align-items: center; /* 垂直方向对齐 */
    list-style: none; /* 去除默认的列表样式 */
    margin: 0 auto; /* 使整个容器居中 */
    line-height: 100%;
    padding: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;

  }
  /* 缩小字体、按钮、输入框、列表等 */
  .header-nav-wrapper li {
    white-space: nowrap; /* 禁止换行 */
    display: inline-block; /* 每个 li 水平排列 */
  }
  .header-nav-logo{
    transform: scale(0.6);
    padding-top: 12px;
    width: 30px;
    height: 30px;

    img{
      width: 30px;
      height: 30px;
    }
  }
}



</style>

